<!-- 这个组件没用到 -->
<template lang="pug">
div
  KSlotPair(
      v-for="(block, i) in filterData"
      :key="i"
      :k="block.kTitle"
      )
    DropDownList.dropdown-list(
        :list="block.list"
        :curValue="block.vTitle"
        @select="select($event, i)"
        :style="dropdownZIndex(i)"
        )
  
</template>

<script>
export default {
  name: "Cascade",
  props: {
    /* 
      [
        {
          k: "status",
          kTitle: "状态",
          v?: "ok",
          vTitle?: "ok(abc)",
          getOptionList() {
          },
          list: [{
            name: "",
          }],
        },
      ]
    */
    filterData: {
      type: Array,
      default: () => [],
    },

    titleStyle: {
      type: Object,
      default: () => {},
    },
  },

  methods: {
    select(option, i) {
      this.filterData[i].v = option.v
      this.filterData[i].vTitle = option.vTitle
      this.$set(this.filterData, i, this.filterData[i])
      this.init(i)
    },

    async init(selectedIndex = -1) {
      let needReset = false
      let req = {}

      for (let index in this.filterData) {
        let block = this.filterData[index]

        if (index <= selectedIndex) {
          req[block.k] = block.v
          continue
        }

        if (needReset) {
          block.v = ""
          block.vTitle = ""
          block.list = null
          this.$set(this.filterData, index, block)
          continue
        }

        if (index == selectedIndex + 1) {
          try {
            let list = await block.getOptionList(req)
            let newList = new Array(list.length)
            let i = 0
            for (let v of list) {
              newList[i] = v
              i++
            }
            block.v = ""
            block.vTitle = ""
            block.list = newList
            // NOTE only this can trigger vue's reactivity system
            this.$set(this.filterData, index, block)
          } catch(err) {
            console.log(err)
          }
          needReset = true
        }
      }
      return this.filterData
    },

    dropdownZIndex(i) {
      return {
        zIndex: 20 - i,
      }
    },

  },

  created() {
    this.init()
  },
}
</script>

<style lang="stylus" scoped>

.dropdown-list
  width: 100%

</style>
